<template>
  <div class="page flex-col">
    <div class="box_1 flex-col justify-end">
      <van-tabs :active="state.active" class="van_tabs">
        <van-tab
          v-for="(item, index) in tabData"
          :name="index"
          :title="item.title"
          replace
          :to="item.router"
          :key="item.id"
        ></van-tab>
      </van-tabs>
      <RouterView />
      <span class="text_14">办世界最好的职业教育</span>
    </div>
    <div class="box_7 flex-col">
      <span class="text_15">市集</span>
      <van-search class="text-wrapper_4 flex-col" v-model="search" placeholder="请输入搜索关键词" />
      <img
        class="image_2"
        referrerpolicy="no-referrer"
        src="https://lanhu.oss-cn-beijing.aliyuncs.com/237cc4b7e8efc0207c070af6c3b205af"
      />
    </div>
  </div>
  <van-row>
    <HomeMenu />
  </van-row>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { useRoute } from 'vue-router'
import HomeMenu from '@/components/layout/HomeMenu.vue'

const tabData = ref([
  { id: 1, title: '艺术设计', router: '/Home/Bazaar/page1' },
  { id: 2, title: '大数据', router: '/Home/Bazaar/page2' },
  { id: 3, title: '新媒体电商', router: '/Home/Bazaar/page3' },
  { id: 4, title: '影视动漫', router: '/Home/Bazaar/page4' }
])

const route = useRoute()
const state = reactive({
  active: Number(route.query.a) ? Number(route.query.a) : 0
})

const search = ref()
</script>
<style scoped src="@/static/Bazaar/common.css" />
<style scoped src="@/static/Bazaar/index.scss" />
